body,
html {
    min-height: 100%;
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-family: -apple-system-font, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

body {
    line-height: 1.5;
    font-size: 14px;
    color: #202124;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

* {
    margin: 0;
    padding: 0;
}


ul,
li {
    list-style: none;
}

.adaptationIphone {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-bottom);
    background-color: #ffffff;
}

.AIChatPreContent {
    padding: 0 20px;
}

.topicTitle {
    position: relative;
    width: fit-content;
    margin-top: 10px;
}

.topicTitle .name {
    color: #202124;
    font-size: 19px;
    font-weight: bold;
    position: relative;
    z-index: 5;
}

.topicTitle .underline {
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 44px;
    height: 6px;
    z-index: 1;
    border-radius: 2px;
    background: linear-gradient(to right, #89C2F6, rgb(181, 233, 237, 0.1));
}

.vocabularyUl {
    display: flex;
    flex-wrap: wrap;
}

.vocabularyLi:nth-child(2n+1) {
    margin-right: 4%;
}

.vocabularyLi {
    height: fit-content;
    align-items: center;
    padding: 10px 15px 10px 15px;
    margin-bottom: 15px;
    display: inline-flex;
    width: calc(48% - 30px);
}
.vocabularyLi .lt{
    width: 100%;
}
.phrasesLi {
    display: flex;
    padding: 0 15px;

}

.phrasesLi>div {
    width: 100%;
    padding: 10px 0 10px 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e8e9eb;
}

.phrasesLi:last-child>div {
    border-bottom: none;
}

.tipsBox,
.vocabularyLi,
.phrasesUl {
    background-color: #ffffff;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.minTitle {
    font-size: 17px;
    font-weight: bold;
    margin: 30px 0 10px 0;
}

.minTitle.phrasesTitle {
    margin: 15px 0 10px 0;
}

.messageLi .term,
.messageLi .cont,
.tipsLi .word,
.tipTit,
.phrasesLi .word,
.vocabularyLi .word {
    font-size: 15px;
    font-weight: 500;
    /* font-family: "PingFang SC" !important; */
}

.tipsLi .lt,
.phrasesLi .lt,
.vocabularyLi .lt {
    display: inline-flex;
    flex-direction: column;
    flex: 1;
}

.voice-js,
.rt img {
    width: 16px;
    height: 16px;
    padding: 10px;
    position: relative;
    top: -10px;
    right: -10px;
}
.tipsLi .rt,
.phrasesLi .rt,
.vocabularyLi .rt{
   height: 16px;
}
.vocabularyLi .rt{
    margin-left: -15px;
}

.tipsBox {
    padding: 10px 15px 15px 15px;
    margin-bottom: 15px;
}


.tipsLi {
    width: calc(100% - 20px);
    background-color: #f3f8ff;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.tipDetail {
    margin: 5px 0 10px 0;
}

.messageTip {
    text-align: center;
    margin: 20px 0;
}

.messageTip,
.messageLi .analyse,
.messageLi .trans,
.phrasesLi .trans,
.vocabularyLi .trans,
.tipDetail,
.tipsLi .trans {
    color: #93979E;
}

.originInfo .voice-js {
   margin-top:3px;
}

.phrasesLi .trans,
.vocabularyLi .trans {
    font-size: 14px;
}

.phrasesLi {
    display: flex;
    align-items: center;
}

.lineOne {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-word;
}

.aiIdentity {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.userIdentity {
    color: #202124;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.messageLi .aiInfo {
    padding: 10px 15px 10px 15px;
    box-sizing: border-box;
    font-size: 14px;
    margin-right: 15px;
    border-radius: 0 10px 10px 10px;
    background: linear-gradient(to bottom right, #ECF6FF, #E6EAF8);
}

.messageLi {
    margin-bottom: 20px;
}

.messageLi .userInfo {
    padding: 10px 15px 10px 15px;
    box-sizing: border-box;
    font-size: 14px;
    margin-left: 15px;
    background-color: #ffffff;
    border-radius: 10px 0 10px 10px;
    color: #202124;
}

.messageLi .originInfo {
    display: flex;
}

.messageLi .notes {
    margin-bottom: 10px;
}

.AIChatPreviewBox {
    padding-bottom: 90px;
}

.notesBox {
    border-top: 1px solid #e8e9eb;
    padding-top: 8px;
    margin-top: 8px;
}
.tipsUl .tipsLi:last-child,
.notesBox .notes:last-child{
    margin-bottom: 0;
}

.footBox {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    z-index: 999;
    padding: 10px 15px 10px 15px;
    width: calc(100% - 30px);
    background-color: #F5F6F7;
    box-shadow: 0px -4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}

.footBox .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    flex: 1;
    color: #ffffff;
    font-size: 15px;
    border-radius: 6px;
    background-color: #4F72FF;
}
.footBox .button a{
    text-decoration: none;
    color:inherit;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.langStyle{
    color:#4F72FF;
    position: relative;
    top:-1px;
    margin-left: 15px;
    padding: 1px 3px;
    border-radius: 3px;
    font-size: 10px;
    background-color: rgba(79,114,255,0.1);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.voice-js.playing {
    filter: invert(45%) sepia(60%) saturate(6143%) hue-rotate(223deg) brightness(100%) contrast(104%);
    -webkit-filter: invert(45%) sepia(60%) saturate(6143%) hue-rotate(223deg) brightness(100%) contrast(104%);
}


@media (prefers-color-scheme: dark) {

    html,
    body.AIChatPreviewBox {
        color: #e6e6e6;
        background-color: #0D0D0D;
    }

    .messageLi .userInfo,
    .topicTitle .name {
        color: #e6e6e6;
    }

    .footBox,
    .messageLi .aiInfo,
    .messageLi .userInfo,
    .tipsBox,
    .vocabularyLi,
    .phrasesUl {
        background: #404040;
    }

    .voice-js,
    .rt img {
        filter: brightness(10);
    }

    .phrasesLi>div {
        border-bottom: 1px solid #514e4e;
    }

    .notesBox {
        border-top: 1px solid #514e4e;
    }

    .tipsLi {
        background-color: #303030;
    }
}


@media all and (min-width:550px) {

    html,
    body,
    .footBox,
    .AdaptationIphone {
        max-width: 600px;
        margin: 0 auto;
    }
}

html.black,
body.black.AIChatPreviewBox {
    color: #e6e6e6;
    background-color: #0D0D0D;
}

.black .messageLi .userInfo,
.black .topicTitle .name {
    color: #e6e6e6;
    font-weight: bold;
}

.black .footBox,
.black .messageLi .aiInfo,
.black .messageLi .userInfo,
.black .tipsBox,
.black .vocabularyLi,
.black .phrasesUl {
    background: #404040;
}

.black .voice-js,
.black .rt img {
    filter: brightness(10);
}

.black .phrasesLi>div {
    border-bottom: 1px solid #514e4e;
}

.black .notesBox {
    border-top: 1px solid #514e4e;
}

.black .tipsLi {
    background-color: #303030;
}

html.night,
body.night.AIChatPreviewBox {
    color: #a3a3a3;
    background-color: #1a1a1a;
}

.night .messageLi .userInfo,
.night .topicTitle .name {
    color: #a3a3a3;
}

.night .footBox,
.night .messageLi .aiInfo,
.night .messageLi .userInfo,
.night .tipsBox,
.night .vocabularyLi,
.night .phrasesUl {
    background: #3d3d3d;
}

.night .voice-js,
.night .rt img {
    filter: brightness(10);
}

.night .phrasesLi>div {
    border-bottom: 1px solid #514e4e;
}

.night .notesBox {
    border-top: 1px solid #514e4e;
}

.night .tipsLi {
    background-color: #2d2d2d;
}